
<template>
    <el-timeline :reverse="reverse" style="margin-top:20px">
          <el-timeline-item
            v-for="(collect, index) in collect_list"
            :key="index"
            :timestamp="collect.collect_time" >
            <div style="color:#666;font-size:14px">
              <div class="collectcss">催收人员：<span>{{collect.collector}}</span></div>
              <div class="collectcss">催收方式：<span>{{collect.way}}</span></div>
              <div class="collectcss">催收结果：<span>{{collect.result_name}}</span></div>
              <div class="collectcss">
                <div style="float:left">备注：</div>
                <span style="width:80%;outline:none">
                  <span v-html="collect.desc"></span>
                  <spanedit  v-model="addDescMore" ref="addDescMore" v-if="collect.editable==1" ></spanedit>
                </span> 
                <i class="el-icon-folder-checked" v-if="collect.editable==1"  style="cursor: pointer;" @click="descAddMore(collect.id,collect.order_id)"></i>
              </div>
              
            </div>
          </el-timeline-item>
    </el-timeline>
</template>
<script>
    import {
        getCollectRecord,
        collectRecordMore,
    } from '@/api/collection'
    import  spanedit  from '@/components/el-div-edit/index.vue'
    export default {
        name: 'collectRecord',
        props: ['order_id'],
        components: {
            spanedit
        },
        created() {
            this.getCollectRecord(this.order_id);
        },
        data() {
            return {
                addDescMore:' ',
                tableRecord: 1,
                listRecordLoading: true,
                listLoading: true,
                temp: {
                    collection_id: null
                },
                downloadLoading: false,
                reverse:false,
                collect_list: [],
                collector:[]
            }
        },
        methods:{
            descAddMore(record_id,order_id) {
                let pmore = {record_id:record_id,desc:this.addDescMore}
                this.addDescMore = ' ';
                document.querySelector("#addDescMore").innerHTML = " "; 
                collectRecordMore(pmore).then(response => {
                if(response.code==200){
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success',
                        duration:2000
                    });
                    this.getCollectRecord(order_id)
                }
                })
            },
            getCollectRecord(order_id){
                let data = {order_id:order_id}
                getCollectRecord(data).then(response => {
                this.collect_list = response.data;
                })
            }
        }
    }
</script>
<style>
.collectcss{margin-top:7px;color:#999;font-size:14px}
.el-table .warning-row {
      background: orangered;
    }

  .el-table .success-row {
    background: #98dd72;
  }
</style>